<template>
  <div>
    <div id="map"></div>
    <button style="position: fixed;width: 100px;height: 100px;top: 0;left: 0;" @click="addImages">add</button>
  </div>
</template>
<script>
mapboxgl.accessToken =
  'pk.eyJ1IjoiYXJjaGl0ZWN0Z3VhbiIsImEiOiJja200dmV2aHIwN2IyMnBxdGZ4bHFiaHc1In0.QAIUvcxoYsFO0CU5RlAdRA'
export default {
  data() {
    return {
      map: null,
      draw: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/dark-v11', // style URL
        zoom: 10, // starting zoom
        center: [-77.432, 25.0306], // starting position
      })
      this.map.on('draw.create',()=>{
        this.map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "MyBuildName": "12啊飒飒的"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [-91.874, 42.76]
                            }
                        }]
                    }
                },
                 "layout": {
                    "text-field": "{MyBuildName}",//文本内容来源字段
                    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],//字体
                    "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
                    "text-anchor": "top",//标记文本相对于定位点的位置
                    "text-size": 12,//字号
                     "icon-image": "yoimage",
                    "icon-size": 0.5,//图标的大小
                },
            });
      })
    },
    addImages(){
      let image = new Image(64, 64)
        // 这里的imageUrl采用require方式调用的base64格式
        image.src = require('../../assets/logo.png')
        image.onload = () => {
          // this.map.addImage('custom-marker', image)
          this.map.addImage('cat', image)
          // Add a data source containing one point feature.
          this.map.addSource('point', {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  geometry: {
                    type: 'Point',
                    coordinates: [-77.4144, 25.0759],
                  },
                },
              ],
            },
          })
          // Add a layer to use the image to represent the data.
          this.map.addLayer({
            id: 'points',
            type: 'symbol',
            source: 'point', // reference the data source
            layout: {
              'icon-image': 'cat', // reference the image
              'icon-size': 0.25,
            },
          })
        }
    }
  },
}
</script>
<style lang="less" scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
</style>
